<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_v-mode属性修饰符</title>
  <!-- 
  在 Vue 3 中， `v-model`  指令支持多种属性修饰符，以增强其功能和灵活性。
  1.  `.lazy`  修饰符
  - 功能：使用  `.lazy`  修饰符时， `v-model`  只在  `change`  事件触发时更新数据，而不是在  `input`  事件时更新。这意味着只有在输入框失去焦点或用户按下回车键后，数据才会更新。
  - 示例：
  <input v-model.lazy="message" placeholder="输入后点击其他地方" />
  在这个例子中， `message`  只会在输入框失去焦点时更新，而不是每次输入时。

  2.  `.number`  修饰符
  - 功能：使用  `.number`  修饰符时， `v-model`  会自动将输入的值转换为数字类型。这对于处理数字输入非常有用。
  - 示例：
  <input v-model.number="age" placeholder="请输入年龄" />
  在这个例子中，用户输入的值会被自动转换为数字类型并赋值给  `age` 。

  3.  `.trim`  修饰符
  - 功能：使用  `.trim`  修饰符时， `v-model`  会自动去除输入值的前后空格。这对于处理用户输入的字符串非常有用，避免因空格导致的错误。
  - 示例：
  <input v-model.trim="name" placeholder="请输入姓名" />
  在这个例子中，输入的姓名会去除前后的空格后再赋值给  `name` 。

  4. 组合使用
  `v-model`  的修饰符可以组合使用，以实现更复杂的功能。例如，可以同时使用  `.lazy`  和  `.trim`  修饰符：
  <input v-model.lazy.trim="message" placeholder="输入并去除空格" />
  在这个例子中， `message`  会在输入框失去焦点时更新，并且会去除前后的空格。

  总结
  - 修饰符： `v-model`  支持  `.lazy` 、 `.number`  和  `.trim`  等修饰符。
  -  `.lazy` ：在  `change`  事件时更新数据，减少频繁更新。
  -  `.number` ：自动将输入值转换为数字类型，方便处理数字输入。
  -  `.trim` ：自动去除输入值的前后空格，避免因空格导致的错误。
  - 组合使用：可以将多个修饰符组合在一起，以实现更灵活的功能。
  -->
</head>
<body>

  <div id="app">
    <h3>1. lazy绑定change事件</h3>
    <input type="text" v-model.lazy="message" placeholder="输入后点击其他地方" />
    <p>message: {{ message }}</p>

    <h3>2. number绑定数字类型</h3>
    <input type="text" v-model.number="age" placeholder="请输入年龄" />
    <p>age: {{ age }}</p>

    <h3>3. trim去除前后空格</h3>
    <input type="text" v-model.trim="name" placeholder="请输入姓名" />
    <p>name: {{ name }}</p>

    <h3>4. 组合使用.lazy.trim</h3>
    <input type="text" v-model.lazy.trim="message" placeholder="输入并去除空格" />
    <p>message: {{ message }}</p>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, watch } = Vue

    createApp({
      setup() {
        const message = ref('')
        const age = ref(0)
        const name = ref('')

        watch([message], (newValue, oldValue) => {
          console.log("message: ", newValue, oldValue)
        })
        
        return {
          message,
          age,
          name
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>